<template>
	<view class="">
		<headerinfo></headerinfo>
		<u-navbar title='分享名片' :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar>
		<view class="wechatqun">
			<view class="title">
				{{global.checkedData.realname}}的名片
			</view>

			<tki-qrcode cid="qrcode23" ref="qrcode2" :iconSize="iconsize" :val="val2" :icon="icon" :size="size2"
				:onval="onval2" :loadMake="loadMake2" :usingComponents="false" @result="qrR2" />
			<view class="desc">
				长按转发给朋友
			</view>
			<view class="btns">
				<!-- #ifdef MP-WEIXIN -->
				<view style="width: 100%;">
					<view class="shareBtnsss">直接分享<button open-type="share" class="shareBtn"></button></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				icon: '',
				iconsize: 40,
				global: this.$global,
				val2: '', // 要生成的二维码值
				size2: 460, // 二维码大小
				onval2: true, // val值变化时自动重新生成二维码
				loadMake2: false, // 组件加载完成后自动生成二维码
				src2: '', // 二维码生成后的图片地址或base64
			};
		},
		mounted() {
			this.create()
		},
		methods: {
			create() {
				let avatar = this.global.checkedData.avatar ? this.global.checkedData.avatar : ''

				if (avatar) {
					uni.downloadFile({
						url: avatar,
						success: (res) => {
							console.log(res)
							this.icon = res.tempFilePath

							this.createErweima()
							console.log(this.icon)
						}
					})
				} else {
					this.icon = '/static/images/logo.png'
					this.createErweima()
				}
			},
			qrR2(res) {
				this.src2 = res
			},
			shareImg() {

				wx.showShareImageMenu({ //分享给朋友
					path: this.src2,
					success: (res) => {
						console.log("分享成功：", res);
					},
					fail: (err) => {
						console.log("分享取消：", err);
					},
				})
				// let that = this
				// this.base64ToFilePath(this.src2, (filePath) => {
				// 	console.log(filePath);

				// })
			},
			createErweima() {
				let username = this.global.checkedData.username ? this.global.checkedData.username : ''
				let realname = this.global.checkedData.realname ? this.global.checkedData.realname : ''
				let id = this.global.checkedData.id

				let path = ''
				if (username) {
					path = `username=${username}&id=${id}`
				} else {
					path = `id=${id}`
				}

				console.log(this.icon)
				this.val2 = `https://familylovetop.oss-cn-shanghai.aliyuncs.com?${path}`
				console.log(this.val2)

			},
			// 分享给好友
			onShareAppMessage(options) {

				let username = this.global.checkedData.username ? this.global.checkedData.username : ''
				let realname = this.global.checkedData.realname ? this.global.checkedData.realname : ''
				let id = this.global.checkedData.id
				let path = ''
				if (username) {
					path = `username=${username}&id=${id}&card=1`
				} else {
					path = `id=${id}&card=1`
				}

				var shareObj = {
					title: `${realname}的名片`, // 默认是小程序的名称(可以写slogan等)
					desc: '', // 小程序的描述
					path: `/pages/card/index?${path}`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: function(res) {
						// 转发成功之后的回调

						if (res.errMsg == 'shareAppMessage:ok') {
							console.log(res)

						}
					},

				}

				// 返回shareObj
				return shareObj;
			},
		}
	};
</script>

<style lang="scss">
	.shareBtnsss {
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #de4849;
		color: #fff;
		border-radius: 10rpx;
		font-size: 28rpx;
		position: relative;
		width: 650rpx;
		margin-top: 30rpx;

		.shareBtn {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			background-color: red;
			z-index: 10;
			opacity: 0;
		}
	}

	.wechatqun {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

		image {
			width: 500rpx;
			height: auto;
		}

		.title {
			text-align: center;
			margin-bottom: 25rpx;
			font-weight: bold;
			letter-spacing: 1px;
		}

		.desc {
			text-align: center;
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #a8a4a4;
		}
	}
</style>